<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <!-- ============头部查询部分============开始 -->
        <div id="form">
          <el-form :inline="true" :model="ruleForm" ref="ruleForm">
            <el-form-item label="角色名称">
              <el-input
                class="input"
                v-model="ruleForm.name"
                type="text"
                size="mini"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                class="input select"
                v-model="ruleForm.status"
                size="mini"
                placeholder="全部"
              >
                <el-option value="有效"></el-option>
                <el-option value="无效"></el-option>
              </el-select>
            </el-form-item>
            <!-- <span>组件值：{{ ruleForm.buildtime}}</span> -->
            <el-form-item class="allbtn">
              <!-- <a><i class="el-icon-search"></i></a> -->
              <el-button
                class="btn"
                size="mini"
                type="primary"
                icon="el-icon-search"
                @click="selectForm('ruleForm')"
              >查询</el-button>
              <el-button
                class="btn"
                size="mini"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="insertList=true"
              >新增</el-button>
              <el-button
                class="btn"
                size="mini"
                type="primary"
                icon="el-icon-remove-outline"
                @click="deleteList()"
              >删除</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- ============头部查询部分============结束 -->
      </el-header>
      <!-- :data="tableData.slice((currentPage-1)*size,currentPage*size)" -->
      <el-main>
        <el-table
          id="table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" :index="indexMethod" label="序号" width="150"></el-table-column>
          <!-- <el-table-column prop="userManagerId" v-show="false" label="姓名" width="120"></el-table-column> -->
          <el-table-column prop="roleCode" label="角色编号" width="160"></el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="160"></el-table-column>
          <el-table-column prop="effectiveDate" :formatter="formatDate1" label=" 生效日期" width="160"></el-table-column>
          <el-table-column prop="expirationDate"  :formatter="formatDate2"  label="失效日期" width="160"></el-table-column>
          <el-table-column prop="status" :formatter="formatStatus" label="状态" width="140"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="updateRole(scope.row)">修改</el-button>
              <el-button type="danger " size="mini" @click="deleteRole(scope.row.userManagerId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增 -->
        <el-dialog
          title="新增角色列表"
          :visible.sync="insertList"
          width="35%"
          top="2vh"
          :close-on-click-modal="false"
        >
          <el-form :model="inputRule" label-width="80px">
            <el-form-item label="角色编码" prop="roleCode">
              <el-input v-model="inputRule.roleCode"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="inputRule.roleName"></el-input>
            </el-form-item>

            <el-form-item label="生效日期" prop="effectiveDate">
              <el-date-picker v-model="inputRule.effectiveDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="失效日期" prop="expirationDate">
              <el-date-picker v-model="inputRule.expirationDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select v-model="inputRule.status" size="small " placeholder="全部">
                <el-option value="有效"></el-option>
                <el-option value="无效"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="insertList = false">取 消</el-button>
            <el-button type="primary" @click="addForm()">确 定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "RoleManager",
  data() {
    return {
      currentPage: 1,
      size: 4,
      tableData: [],
      ruleForm: {},
      inputRule: {},
      insertList: false
    };
  },
  methods: {
    formatDate1(row) {
      var date = new Date(row.effectiveDate) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
         var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
         var D = date.getDate()/10>1? date.getDate():'0'+date.getDate();
         return Y+M+D
    },
    formatDate2(row) {
      var date = new Date(row.expirationDate) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
         var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
         var D = date.getDate()/10>1? date.getDate():'0'+date.getDate();
         return Y+M+D
    },
    selectAll() {
      const that = this;
      that.$http.get("/findAllRole").then(function(response) {
        console.log(response.data);
        that.tableData = response.data;
      });
    },
    selectionChange() {},
    handleSelectionChange() {},
    //判断状态    1 代表有效  0代表无效
    formatStatus(row, column) {
      // console.log(row.status + "页面状态展示");
      console.log(row.roleStatus);
      return row.roleStatus == 1 ? "有效" : "无效";
    },
    indexMethod(index) {
      return ++index;
    },
    updateRole(row) {
      console.log(row.roleCode);
    },
    addForm() {
      console.log(this.inputRule);
      const params = new URLSearchParams();
      params.append("roleCode", this.inputRule.roleCode);
      params.append("roleName", this.inputRule.roleName);
      params.append("effectiveDate", this.inputRule.effectiveDate);
      params.append("expirationDate", this.inputRule.expirationDate);
      let status;
      if (this.inputRule.status == "有效") {
        status = 1;
      } else if (this.inputRule.status == "无效") {
        status = 0;
      } else {
        status = -1;
      }
      params.append("roleStatus", status);
      var that = this;
      that
        .$http({
          method: "post",
          url: "/insertRole",
          data: params
        })
        .then(res => {
          console.log("res=>" + res.data);
          if (res.data == 1) {
            Message({ message: "添加成功", type: "success" });
            that.selectAll();
          } else {
            Message({ message: "添加失败", type: "error" });
          }
        });
      this.insertList = false;
    }
  },
  mounted: function() {
    this.selectAll();
    console.log(this.tableData + "===");
  }
};
</script>
<style scoped>
.select {
  width: 75px;
}
#form {
  float: left;
  margin-top: 20px;
}
.input {
  margin-top: 10px;
  width: 91px;
}
.btn {
  margin-top: 16px;
  width: 75px;
}
.el-header {
  /* width: 100%; */
  background-color: #b3c0d1;
  color: #333;
  /* line-height: 60px; */
}
</style>